<template>
  <div>
    <el-row>
      <el-button type="success" plain @click="addNewUser">新增用户</el-button>
    </el-row>

    <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        prop="musicId"
        label="音乐编号"
        width="80">
      </el-table-column>

      <el-table-column
        prop="musicName"
        label="音乐名"
        width="180">
      </el-table-column>

      <el-table-column prop="musicImage" label="音乐图片" width="180">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.userAvater"></el-avatar>
        </template>
      </el-table-column>

      <el-table-column
        prop="userGender"
        label="性别">
      </el-table-column>

      <el-table-column
        prop="userEmail"
        label="邮箱">
      </el-table-column>

      <el-table-column
        prop="userAddress"
        label="地址">
      </el-table-column>

      <el-table-column
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">

          <el-button
            size="mini"
            type="primary"
            @click="editUser(scope.row.userId)">编辑用户
          </el-button>

          <el-button
            size="mini"
            type="danger"
            @click="userDetail(scope.row.userId)">查看详情
          </el-button>

          <!--          <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">-->
          <!--            查看详情-->
          <!--          </el-button>-->

        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
  export default {
    name: "MusicList",
    data() {
      return {
        tableData: [{
          userId: '',
          userName: '',
          userGender: '',
          userEmail: '',
          userAvater: '',
          userAddress: '',
          userDescription: "",
          userVip: '',
          userListenQuantity: '',
          userCreateTime: '',
        }]
      }
    }
  }
</script>

<style scoped>

</style>
